<template>
    <div class="upper-section" style="text-align: center;">
        <el-date-picker
          v-model="selectedDateRange"
          type="monthrange"
          range-separator="到"
          start-placeholder="起始月份"
          end-placeholder="截至月份"
          unlink-panels
          @change="handleDateChange" 
        />
      </div>
    <div class="lower-section">
        <!-- 下部分可视化图表 -->
        <div class="visualization">
            <!-- 左 -->
            <div class="left-lower">
                <div class="left-section">
                    <div class="chart-title">中国汽车销量趋势图</div>
                    <div class="chart-container">
                        <leftupView :childData1="parentData1" />
                    </div>
                </div>
                <div class="left-section">
                    <div class="chart-title">汽车品牌销量排行榜</div>
                    <div class="chart-container">
                        <leftdownView :childData2="parentData2"/>
                    </div>
                </div>
            </div>
    
            <!-- 中 -->
            <div class="center-lower">
                    <div class="chart-title">汽车厂商销量排行榜</div>
                    <div class="map-container">
                        <mapView_up :childData3="parentData3" />
                </div>
                <div class="center-down">
                  
                    <div class="chart-title">燃油车销量排行</div>
                    <div class="map-container">
                        <mapView_down :childData1="parentData1" />
                    </div>
                </div>
            </div>
    
            <!-- 右 -->
            <div class="right-lower">
                <div class="right-section">
                    <!-- 右上 -->
                    <div class="right-up">
                        <div class="chart-title">动力/类型占比</div>
                        <div class="chart-container" id="rightupView">
                            <rightupView :childData1="parentData1"/>
                        </div>
                    </div>
                    <!-- 右下 -->
                    <div class="right-down">
                        <div class="price-title">电动车销量排行</div>
                        <div class="chart-container" id="rightdownView">
                            <rightdownView :childData1="parentData1"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import axios from 'axios'
import { ref, onMounted  } from 'vue'
import leftupView from './allshows/leftupView.vue'
import leftdownView from './allshows/leftdownView.vue'
import mapView_up from './allshows/mapView_up.vue'
import mapView_down from './allshows/mapView_down.vue'
import rightupView from './allshows/rightupView.vue'
import rightdownView from './allshows/rightdownView.vue'
const parentData1 = ref([])
const parentData2 = ref([])
const parentData3 = ref([])
const selectedDateRange = ref([])
// 异步函数，用于从后端获取数据
const fetchData = async () => {
  try {
    const startDate = selectedDateRange.value[0];
    const endDate = selectedDateRange.value[1];
    // 构造请求体，包含起止日期
    const response = await axios.post('http://127.0.0.1:8000/car/api/allshow/show_all_years_sales/', {
    start_date: startDate ? startDate.toISOString().split('T')[0] : '', // 转换为 ISO 日期字符串
    end_date: endDate ? endDate.toISOString().split('T')[0] : '',
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 将后端返回的数据存储到 parentData1 中
    parentData1.value = response.data.all_years_sales_data;
    parentData2.value = response.data.sum_sales_by_car;
    parentData3.value = response.data.sum_automobilesales_by_year;
  } catch (error) {
    console.error('Error fetching data', error);
  }
}

// 处理日期选择器变化事件
const handleDateChange = async () => {

  await fetchData(); // 在日期选择完成后调用 fetchData 函数
}


// 组件挂载时立即获取数据
onMounted(async () => {
  await fetchData(); // 组件挂载后立即获取数据
});
</script>

<style>
.scrollbar-flex-content {
    display: flex;
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }

/* 分成上下两部分 */
.upper-section {
    height: 50%;
    width: 100%;
}

.lower-section {
    height: 50%;
    width: 100%;
}

/* 下部分再分成左、中、右三个板块 */
.left-lower {
    width: 33.33%;
    height: 100%;
    float: left;
}

.center-lower {
    width: 33.33%;
    height: 100%;
    float: left;
}

.right-lower {
    width: 33.33%;
    height: 100%;
    float: left;
}

</style>